<template>
    <div id="menu-list">
        <div v-show="showAddOrEdit">
            <router-view></router-view>
        </div>
        <div class="container-fluid" v-show="!showAddOrEdit">
            <div class="panel panel-info">
                <vxe-toolbar custom print export ref="xToolbar" class="panel-heading">
                    <template #buttons>
                        <vxe-button type="text" status="success" icon="fa fa-plus"
                                    @click="$router.push('/sys/menu/add');showAddOrEdit = true;" content="新增"
                                    v-show="$request.isHavePermissions('/sys/menu/add')">
                        </vxe-button>
                        <vxe-button type="text" status="warning" icon="fa fa-edit" content="修改" @click="edit();"
                                    v-show="$request.isHavePermissions('/sys/menu/edit')"></vxe-button>
                        <vxe-button type="text" status="danger" icon="fa fa-remove" content="删除" @click="del()"
                                    v-show="$request.isHavePermissions('/sys/menu/edit')"></vxe-button>
                    </template>
                    <template #tools>
                        <vxe-input v-model="searchText" placeholder="请输入关键字" @change="searchTextChange()"
                                   style="margin-right: .8em;"></vxe-input>
                        <vxe-button circle icon="fa fa-refresh" @click="loadData();" :loading="loading"></vxe-button>
                    </template>
                </vxe-toolbar>
                <div class="panel-body" style="padding: 0.125rem;">
                    <vxe-table row-id="id" resizable show-overflow ref="xTree" border align="left" :loading="loading"
                               :tree-config="{children: 'children', iconOpen: 'fa fa-chevron-down', iconClose: 'fa fa-chevron-right'}"
                               :tooltip-config="{showAll: true, enterable: true}" :data="list" :export-config="{}"
                               :checkbox-config="{labelField: 'name', checkRowKeys: [],checkStrictly:true,trigger: 'row'}"
                               @checkbox-change="selectChangeEvent">
                        <vxe-column type="checkbox" field="name" title="名称" tree-node width="200">
                            <template #default="{ row }">
                <span>
                  <template v-if="row.children && row.children.length">
                    <i class="tree-node-icon fa"
                       :class="$refs.xTree.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
                  </template>
                  <template v-else>
                    <i class="tree-node-icon fa fa-file-o"></i>
                  </template>
                  <span>{{ row.name }}</span>
                </span>
                            </template>
                        </vxe-column>
                        <vxe-column title="图标" field="icon">
                            <template #default="{row}">
                                <i :class="row.icon"></i>
                            </template>
                        </vxe-column>
                        <vxe-column field="module_name" title="模块名"></vxe-column>
                        <vxe-column field="action_name" title="控制器名"></vxe-column>
                        <vxe-column field="function_name" title="方法名"></vxe-column>
                        <vxe-column field="is_menu" title="是否菜单">
                            <template #default="{row}">
                                <template v-if="row.is_menu === 1">是</template>
                                <template v-else-if="row.is_menu  === 0">否</template>
                            </template>
                        </vxe-column>
                        <vxe-column field="sort" title="顺序"></vxe-column>
                        <vxe-column field="createTime" title="创建时间" :formatter="formatterTime" width="180"></vxe-column>
                        <vxe-column field="updateTime" title="修改时间" :formatter="formatterTime" width="180"></vxe-column>
                    </vxe-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
    name: 'SysMenuList',
    data () {
        return {
            list: [],
            originData: [],
            showAddOrEdit: false,
            searchText: '',
            loading: false
        }
    },
    created () {
        this.$nextTick(() => {
            // 将表格和工具栏进行关联
            const $table = this.$refs.xTree
            $table.connect(this.$refs.xToolbar)
        })
        this.loadData()
    },
    watch: {
        $route: {
            deep: true,
            handler (newVar, oldVar) {
                if (newVar.path === '/sys/menu' && (oldVar.path === '/sys/menu/add' || oldVar.path.indexOf('/sys/menu/edit') >
                    -1)) {
                    this.showAddOrEdit = false
                    if (this.$route.query.action !== 'back') {
                        // 不是返回才刷新列表
                        this.searchText = ''
                        this.loadData()
                    }
                }
            }
        }
    },
    methods: {
        loadData () {
            this.loading = true
            this.$request.get(this.$apiSys.menuListUrl, {
                search: this.searchText
            }).then(res => {
                this.list = res.rows
                this.originData = this.list
                this.loading = false
                // 展开所有节点
                // this.$nextTick(() => {
                //   this.$refs.xTree.setAllTreeExpand(true)
                // })
            }, err => {
                this.loading = false
            })
        },
        formatterTime (arg) {
            switch (arg.columnIndex) {
                case 7:
                    return arg.row.create_time !== null ? arg.row.create_time.replace('T', ' ') : arg.row.create_time
                case 8:
                    return arg.row.update_time !== null ? arg.row.update_time.replace('T', ' ') : arg.row.update_time
            }
            // return arg.cellValue !== null ? arg.cellValue.replace('T', ' ') : arg.cellValue
        },
        edit (id = 0) {
            if (id < 1) {
                let obj = this.$refs.xTree.getCheckboxRecords()
                if (obj.length !== 1) {
                    this.$XModal.message({
                        content: '选择一行数据编辑',
                        status: 'error'
                    })
                    return false
                }
                id = obj[0].id
            }

            try {
                this.$router.push('/sys/menu/edit/' + id)
                this.showAddOrEdit = true
            } catch (e) {
                console.log(e)
            }
        },
        del () {
            let obj = this.$refs.xTree.getCheckboxRecords()
            if (obj.length < 1) {
                this.$XModal.message({
                    content: '请选择要删除的菜单',
                    status: 'error'
                })
                return false
            }
            let ids = []
            for (var i = 0; i < obj.length; i++) {
                ids.push(obj[i].id)
            }
            this.$request.delete(this.$apiSys.menuDeleteUrl, {
                ids: ids + ''
            }, true).then(res => {
                if (res.status) {
                    this.$XModal.message({
                        content: res.msg,
                        status: 'success'
                    })
                    this.loadData()
                }
            })
        },
        selectChangeEvent () {

        },
        searchTextChange () {
            if (this.searchText.length > 0) {
                let options = {children: 'children'}
                let searchProps = ['name', 'module_name', 'action_name', 'function_name']
                this.list = XEUtils.searchTree(this.originData, item => searchProps.some(key => XEUtils.toValueString(item[key]).indexOf(this.searchText) > -1), options)
                // 搜索之后默认展开所有子节点
                this.$nextTick(() => {
                    this.$refs.xTree.setAllTreeExpand(true)
                })
            } else {
                this.list = this.originData
            }
        }
    }
}
</script>

<style>
</style>
